import React from 'react'
import { useQuery } from 'remax'
import { Image, Text, View } from 'remax/one'
import { usePageEvent } from 'remax/macro'
import {
  Swiper,
  SwiperItem,
  openLocation,
  previewImage,
  stopPullDownRefresh,
} from 'remax/wechat'
import { Grid, Icon, Row, Space, Tag } from 'annar'
import dayjs from 'dayjs'
import isoWeek from 'dayjs/plugin/isoWeek'
import useCloud from '@/hooks/use-cloud'
import styles from './index.css'
dayjs.extend(isoWeek)

export default () => {
  const { _id } = useQuery()
  const { data, mutate } = useCloud('get-screen', { _id })

  usePageEvent('onPullDownRefresh', async () => {
    await mutate()
    stopPullDownRefresh()
  })

  if (!data) {
    return null
  }

  const {
    name,
    address,
    location,
    imgUrls,
    castPeriods,
    coverage,
    price,
    casts,
  }: WBG.Screen = data

  return (
    <>
      <Swiper className={styles.topArea} indicatorDots autoplay circular>
        {imgUrls.map((v, i) => (
          <SwiperItem key={i}>
            <Image
              className={styles.topImg}
              src={v}
              mode="aspectFill"
              onTap={() => {
                previewImage({ urls: imgUrls, current: v })
              }}
            />
          </SwiperItem>
        ))}
      </Swiper>
      <Space className={styles.basicArea} direction="vertical" size={12}>
        <View className="large-text ellipsis">{name}</View>
        <Row>
          <Icon type="locationfill" />
          <View
            className="location-text ellipsis"
            onTap={() =>
              openLocation({
                longitude: location.coordinates[0],
                latitude: location.coordinates[1],
              })
            }
          >
            {address}
          </View>
        </Row>
        <View>
          <Icon type="time" />
          <Text className="small-text">本屏幕广告投放时间段：</Text>
        </View>
        <Row justify="space-around">
          {castPeriods.map((v, i) => (
            <Tag key={i} color="yellow">
              {v[0]} 到 {v[1]}
            </Tag>
          ))}
        </Row>
      </Space>
      <View className={styles.mainArea}>
        <Space className={styles.mainBox} direction="vertical" size={12}>
          <Text className="medium-text">本屏幕数据</Text>
          <Row justify="space-between">
            <View>
              <Icon type="moneybag" color="red" />
              <Text className="small-text">您的店通过这块大屏产生的营业额</Text>
            </View>
            <View>
              <Text className="small-text">￥</Text>
              <Text className="large-text">0</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="shop" color="blue" />
              <Text className="small-text">通过这块大屏来到您店里的人数</Text>
            </View>
            <View>
              <Text className="large-text">0</Text>
              <Text className="small-text">人</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="people" color="green" />
              <Text className="small-text">本屏幕覆盖学生人数(约)</Text>
            </View>
            <View>
              <Text className="large-text">{coverage}</Text>
              <Text className="small-text">人</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="recharge" color="orange" />
              <Text className="small-text">本屏幕每日广告价格</Text>
            </View>
            <View>
              <Text className="small-text">￥</Text>
              <Text className="large-text">
                {Math.round((price / 7) * 10) / 10}
              </Text>
            </View>
          </Row>
        </Space>
        <Space className={styles.mainBox} direction="vertical" size={12}>
          <Text className="medium-text">本屏幕已投放商家</Text>
          {casts?.length ? (
            casts.map((v, i) => (
              <View key={i}>
                <View>
                  <Text className="small-text">
                    {dayjs(v.week).format('M月D日')} -{' '}
                    {dayjs(v.week).add(6, 'day').format('M月D日')}
                  </Text>
                  {v.promotions.length < 6 ? (
                    <Tag color="green">剩余{6 - v.promotions.length}/6</Tag>
                  ) : (
                    <Tag color="red">已售罄</Tag>
                  )}
                </View>
                <Grid data={v.promotions} columns={3}>
                  {(v: WBG.Promotion) => (
                    <Space
                      className={styles.gridItem}
                      direction="vertical"
                      size={6}
                    >
                      <Image
                        className={styles.avatarImg}
                        src={v.store.imgUrl}
                        mode="aspectFill"
                      />
                      <Text className="small-text">{v.store.name}</Text>
                    </Space>
                  )}
                </Grid>
              </View>
            ))
          ) : (
            <Text className="small-text">暂无</Text>
          )}
        </Space>
      </View>
    </>
  )
}
